<template>
  <div class="home">
      <header-yellow></header-yellow>
      <!-- 主要内容 -->
      <div class="main">
        <!-- bannar图 -->
        <div class="bannar">
          <router-link to="/">
            <img v-lazy="getBannar.bannar">
          </router-link>
        </div>
        <!-- 分类商品内容 -->
        <ul class="commodity">
          <li class="commodity_item" v-for="(item, index) in getClassifys" :key="item.classify_id" v-if="index < 4">
            <!-- 分类标题 -->
            <div class="product_title">
              <span :class="{'active': index > 0}">{{item.classify_title}}</span>
              <router-link to="/market" class="link">更多&gt;</router-link>
            </div>
            <!-- 分类图片 -->
            <img :src="item.imgs.small" class="picture">
            <!-- 分类商品 -->
            <ul class="products">
              <li class="products_item" v-for="(pro, ind) in item.products" :key="pro.product_id" v-if="ind < 3" :class="{'active': ind > 1}">
                <router-link :to="'/product-item/' + pro.product_id">
                  <img v-lazy="pro.imgs.small" class="product_picture" :ref="'item'+ind">
                </router-link>
                <span class="product_name">{{pro.brand}}</span>
                <div class="product_msg">
                  <span>{{pro.unit}}ml</span>
                  <span>￥{{pro.price}}</span>
                </div>
                <div class="addProduct" @click.stop="addNum(pro, ind)">+</div>
                <!-- <div class="diangao" v-if="index > 2"></div> -->
              </li>
            </ul>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
import HeaderYellow from '@/components/header-yellow/Header-yellow'
export default {
  data () {
    return {
      cartPos: {}
    }
  },
  methods: {
    // 将数据添加到购物车
    addNum (item, index) {
      if (this.userInfo.id) {
        // 只是原始分类数据
        item.num++
        this.$store.dispatch('addNum', item)

        // 获取点击对象
        let imgObj = this.$refs['item' + index][0]
        let pos = imgObj.getBoundingClientRect()
        let cartPos = this.cartPos
        this.$addCart({
          src: item.imgs.small,
          width: pos.width,
          height: pos.height,
          start: {
            left: pos.left,
            top: pos.top
          },
          end: {
            left: cartPos.left,
            top: cartPos.top
          }
        })
        // tabBar中的购物车按钮动画
        this.$store.dispatch('changeCartActive')
      } else {
        this.$msg('提示', '未登录')
          .then(res => {
            this.$router.push('/login')
          })
      }
    }
  },
  computed: {
    // 获取用户信息
    userInfo () {
      return this.$store.state.userInfo
    },
    //获取bannar数据
    getBannar () {
      // console.log(this.$store.state.bannar)
      return this.$store.state.bannar
    },
    //获取分类数据
    getClassifys () {
      return this.$store.state.classifys
    },
    changeNum (index) {
      this.$store.state.number = index
      return this.$store.state.number
    }
  },
  components: {
    HeaderYellow
  }
}
</script>
<style scoped>
.home{
  width: 100%;
  height: 100%;
}
.main{
  width: 100%;
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  bottom: 4.9rem;
  background-color: #efefef;
  overflow-y:scroll;
}
.bannar{
  width: 100%;
  height: 10rem;
}
.bannar img{
  width: 100%;
  height: 100%;
}
.bannar img[lazy=loading] {
  width: 100%;
  height: 100%;
  background: url('../../common/images/loading.gif') no-repeat center center;
  background-size: 15% 25%;
}
/* 分类商品 */
.commodity{
  width: 100%;
}
.commodity_item{
  width: 100%;
  height: 30rem;
}
.product_title{
  width: 100%;
  height: 4rem;
}
.product_title > span{
  height: 1.5rem;
  font-size: 1.5rem;
  float: left;
  font-weight: bold;
  color: rgb(96,101,159);
  text-indent: 1rem;
  border-left: 0.8rem solid rgb(96,101,159);
  margin-top: 1.4rem;
}
.product_title > span.active{
  color: rgb(232,0,19);
  border-left: 0.8rem solid rgb(232,0,19);
}
.product_title > .link{
  float: right;
  line-height: 4rem;
  font-size: 1.3rem;
  color: rgb(153,153,153);
  text-decoration: none;
}
.picture{
  width: 100%;
  height: 6rem;
}
/* 商品数据 */
.products{
  width: 100%;
  margin-top: 1rem;
}
.products_item{
  width: 33.3333%;
  height: 17rem;
  float: left;
  box-sizing: border-box;
  border-right: 0.1rem solid rgb(179,179,179);
}
.products_item.active{
  border-right: 0 solid transparent;
}
.product_picture{
  width: 90%;
  height: 9rem;
  margin-left: 5%;
}
.products_item img[lazy=loading] {
  width: 100%;
  height: 50%;
  background: url('../../common/images/loading.gif') no-repeat center center;
  background-size: 25% 25%;
}
.product_name{
  display: block;
  margin-top: 1rem;
}
.product_msg{
  width: 100%;
  margin-top: 2rem;
}
.product_msg>span{
  display: block;
  margin-top: 1rem;
  color: rgb(153,153,153);
}
.product_msg>span:nth-of-type(2){
  color: rgb(255, 67, 0)
}
.addProduct{
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(159,159, 159);
  border-radius: 50%;
  position: relative;
  bottom: 2rem;
  right: 1rem;
  float: right;
  color: rgb(255, 67, 0);
  font-size: 3rem;
  text-align: center;
  line-height: 2.5rem;
}
</style>

